<template>
  <div class="tem-box">
    <div v-cloak class="head-top-box">
      <div class="head-top-left">
        {{activityName}}报名
      </div>
    </div>
    <div class="table-box">
      <!-- 表单内容 -->
      <div v-loading="formLoding" element-loading-text="获取数据中" class="big-box">
        <div v-for="(table,ind) of tableList" :key="ind" class="table-item">
          <div class="item-tit-box">
            {{table.title}}{{ticketTypeName}}
            <el-tag v-if="table.result===false" style="margin-left:6px" type="danger">报名失败{{ `:${table.errorMsg}`}}</el-tag>
            <el-tag v-if="table.result===true" style="margin-left:6px" type="success">报名成功</el-tag>
            <img v-if="tableList.length>1" @click="delted(ind)" class="item-tit-box-img" src="https://img.alicdn.com/tfs/TB1OqD_IrPpK1RjSZFFXXa5PpXa-38-38.png">
            <el-button v-if="table.result===false" @click="agenItem(ind)" :loading="table.loading" plain style=" position: absolute;top:8px;right:6px">再次提交</el-button>
          </div>
          <div class="item-con-box">
            <!-- <div
              v-if="item.attribute.titName!= '分论坛意向'"
              v-for="(item,index) of table.componenList"
              :key="index"
              class="item-con"
            >-->
            <div v-for="(item,index) of table.componenList" :key="index" class="item-con">
              <div class="title">
                <span v-if="item.attribute.ifCheck" class="title-span">*</span>
                {{ item.attribute.titName }}
              </div>
              <div class="item">
                <el-input v-if="item.componentName=='stringTem'" clearable v-model.trim="item.attribute.filedValue" :maxLength="item.attribute.maxLength" :placeholder="item.attribute.placeholder"></el-input>
                <el-input-number v-if="item.componentName=='numberTem'" clearable v-model.trim="item.attribute.filedValue" style="width:100%" :controls="false" :placeholder="item.attribute.placeholder" :min="item.attribute.minValue" :max="item.attribute.maxValue"></el-input-number>
                <el-select v-if="item.componentName=='moreSelectTem'" clearable filterable style="width:100%" v-model="item.attribute.filedValue" :placeholder="item.attribute.placeholder">
                  <el-option v-for="(item,index) in item.attribute.selectList" :key="index" :label="item.name" :value="item.name">
                    <span style="float: left;color: #3A3A3A;">{{ item.name }}</span>
                    <span style="float: right;color: #FF3E85;">{{ item.value }}</span>
                  </el-option>
                </el-select>
                <el-select v-if="item.componentName=='selForumTem'" clearable filterable style="width:100%" v-model="item.attribute.filedValue" :placeholder="item.attribute.placeholder">
                  <el-option :disabled="item.orderNum>=item.bbsNum" v-for="(item,index) in item.attribute.selectList" :key="index" :label="item.name" :value="item.bbsId">
                    <span style="float: left;color: #3A3A3A;">{{ item.name }}</span>
                    <!-- <span style="float: right;color: #FF3E85;">已预约{{ item.orderNum||0 }}</span> -->
                    <span v-if="item.orderNum>=item.bbsNum" style="float: right;color: #FF3E85;">已预约满</span>
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-if="tableList.length<=30&&tableList.length!=0" class="add-pop">
          <el-button @click="addPople()" icon="el-icon-plus" style="border:none" plain>添加参会人信息</el-button>
        </div>-->
      </div>
      <!-- 服务协议 -->
      <div class="check-box">
        <el-checkbox v-if="tableList.length" v-model="check">
          <span class="Agre-tit">我已阅读并同意</span>
        </el-checkbox>
        <span v-if="tableList.length" v-for="(item, index) in agreeList" :key="index" @click="linkDetail(item.agreementId)" class="protol-text">《{{item.title}}》</span>
      </div>
      <!-- 提交按钮 -->
      <div v-if="tableList.length" class="bottom-submit-form">
        <el-button @click="checkForm()" style="width:130px" icon="el-icon-check" type="primary">提交</el-button>
      </div>
      <!-- 手机验证信息 -->
      <el-dialog close="dialog-phoneAlert" title :visible.sync="phoneAlert" width="600px" center>
        <div class="top-border-color"></div>
        <div class="phoneAlert-con">
          <div class="phoneAlert-tit">欢迎预定{{activityName}}门票</div>
          <div class="phoneAlert-plac">请先验证手机号码</div>
          <div class="phoneAlert-input-box">
            <div class="phoneAlert-input-tit">
              <img style="width:34.6px;margin-right:10px" src="https://img.alicdn.com/tfs/TB1biUcICzqK1RjSZFHXXb3CpXa-72-72.png">
              +86 |
            </div>
            <input v-model.trim="phone" type="text" maxlength="11" class="phoneAlert-input" placeholder="请输入手机号码">
          </div>
          <div class="phoneAlert-input-box">
            <div style="width:50px" class="phoneAlert-input-tit">
              <img style="width:34.6px;margin-right:10px" src="https://img.alicdn.com/tfs/TB1ndzGICzqK1RjSZPcXXbTepXa-72-72.png">
            </div>
            <input v-model.trim="code" type="text" style="padding-left:50px" maxlength="6" class="phoneAlert-input" placeholder="请输入验证码">
            <div v-if="codeTime==60" @click="getCode()" class="get-code">获取验证码</div>
            <div v-else class="get-code">{{codeTime}}s</div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button :loading="subDataLoding" style=" margin-top: 69px; margin-bottom: 46px" @click="subSuess()" icon="el-icon-check" type="primary">确定</el-button>
        </span>
      </el-dialog>
      <!--进入钉钉查看门票 -->
      <div v-show="isShow">
        <el-dialog style="background: rgba(0, 0, 0, 0.36);" close="dialog-phoneAlert" title="进入钉钉查看门票" :visible.sync="codeAlert" width="860px" :modal="false" left>
          <div class="top-border-color"></div>
          <div class="dialog-code-box">
            <div class="dialog-code">
              <div class="dialog-code-tit">“扫码进入{{activityName}}”</div>
              <div class="dialog-code-img">
                <div id="qrcode" ref="qrcode" class="hd-img"></div>
              </div>
            </div>
            <div class="dialog-code">
              <div class="dialog-code-tit">“还没有钉钉？扫码也可下载”</div>
              <div class="dialog-code-img">
                <img src="https://gw.alicdn.com/tfs/TB1J.rSwGmWBuNjy1XaXXXCbXXa-280-280.png">
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { tableListCheck } from "./checkData.js";
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      titName: "您的报名信息已提交！",
      ticketTypeName: "", //票名称
      locationSearch: "", //URL
      qrcodeNew: "", //二维码
      codeImg: "",
      subDataLoding: false, //提交信息
      formLoding: false, //loding
      luanTanList: [], //论坛数据
      urlParam: {
        corpId: "",
        //url参数
        activityId: "", //活动id
        tempId: "",
        signUpType: "",
        ticketTypeId: "", //票种id
        channelId: "" //渠道
      },
      check: false,
      activityName: "", // 名称
      agreeList: [],
      tableList: [], //多个信息表单
      formJson: {}, //表单json
      codeAlert: true, //二维码弹框
      isShow: false,
      phoneAlert: false, //手机验证弹框,
      phone: "", //手机号码
      code: "", //验证码
      codeTime: 60 //验证码时间
    };
  },
  created() {
    this.locationSearch = location.href;

    this.urlParam.activityId = !this.GetUrlParam("activeId")
      ? null
      : this.initUrl("activeId");
    this.urlParam.ticketTypeId = !this.GetUrlParam("ticketTypeId")
      ? null
      : this.initUrl("ticketTypeId");
    this.urlParam.corpId = !this.GetUrlParam("corpId")
      ? null
      : this.initUrl("corpId");
    this.urlParam.channelId = !this.GetUrlParam("channelId")
      ? null
      : this.initUrl("channelId");

    this.luanTanListFun();
  },
  methods: {
    linkDetail(item) {
      let data = "";
      for (let i = 0; i < this.agreeList.length; i++) {
        let element = this.agreeList[i];
        if (item == element.agreementId) {
          data = element.xyvote;
        }
      }
      this.$router.push({
        name: "check",
        params: {
          data: data
        }
      });
    },
    // 初始化ur路径
    initUrl(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            this.locationSearch
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || ""
      );
    },
    getCodeNum() {
      this.qrcodeNew.makeCode(this.codeImg);
    },
    //生成二维码
    getNewCode() {
      this.qrcodeNew = new QRCode(this.$refs.qrcode, {
        width: 280,
        height: 280,
        text: this.codeImg
      });
      this.getCodeNum();
    },
    // 判断url参数
    GetUrlParam(paraName) {
      var url = this.locationSearch;
      var arrObj = url.split("?");

      if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;

        for (var i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split("=");
          if (arr != null && arr[0] == paraName) {
            return arr[0];
          }
        }
        return "";
      } else {
        return "";
      }
    },
    //论坛数据 查询论坛的
    luanTanListFun() {
      this.formLoding = true;
      this.$http
        .post("/api/isv/signUp/queryForum", {
          activityId: this.urlParam.activityId,
          corpId: this.urlParam.corpId
        })
        .then(
          res => {
            if (res.data.success) {
              this.luanTanList = res.data.result;
              this.getForm();
            } else {
              this.formLoding = false;
              this.$message({
                message: res.data.errorMsg || "论坛数据获取失败",
                type: "warning"
              });
            }
          },
          err => {
            this.formLoding = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 得到form表单json
    getForm() {
      let subData = {
        activityId: this.urlParam.activityId,
        ticketTypeId: this.urlParam.ticketTypeId,
        isPay: "free"
      };
      this.$http.post("/api/isv/temp/queryTempletByTicketTypeId", subData).then(
        res => {
          this.formLoding = false;
          if (res.data.success) {
            this.formJson = {
              loading: false,
              result: "",
              errorMsg: "",
              title: "",
              componenList: []
            };
            this.urlParam.tempId = res.data.result.id;
            this.activityName = res.data.result.activityName;
            if (this.activityName) {
              document.title = this.activityName;
            }
            this.ticketTypeName = `${res.data.result.ticketTypeName}`;
            this.$forceUpdate();
            this.agreeList = res.data.result.agreeList;
            this.formJson.componenList = JSON.parse(res.data.result.vnote1); //相当于test.json里面的数据
            if (this.luanTanList.length != 0) {
              // 添加论坛选择组件 (如果后台创建的论坛)
              let forum = {
                componentName: "selForumTem",
                attribute: {
                  filedValue: "",
                  filedCode: "bbsId",
                  titName: "分论坛意向",
                  placeholder: "请选择",
                  ifCheck: true,
                  selectList: []
                }
              };
              for (let i = 0; i < this.luanTanList.length; i++) {
                if (this.luanTanList[i].orderNum < this.luanTanList[i].bbsNum) {
                  forum.attribute.selectList.push({
                    name: this.luanTanList[i].bbsName,
                    ifSel: false,
                    activityId: this.luanTanList[i].activityId,
                    bbsId: this.luanTanList[i].bbsId,
                    bbsNum: this.luanTanList[i].bbsNum,
                    bbsType: this.luanTanList[i].bbsType,
                    corpId: this.luanTanList[i].corpId,
                    orderNum: this.luanTanList[i].orderNum
                  });
                }
              }
              this.formJson.componenList.push(forum);
              // 添加论坛选择组件
            }
            this.tableList = [];
            let obj = JSON.parse(JSON.stringify(this.formJson));
            this.tableList.push(obj);
          } else {
            this.$message({
              message: res.data.errorMsg || "表单数据获取失败",
              type: "warning"
            });
          }
        },
        err => {
          this.formLoding = false;
          this.$message.error("服务器出小差了");
        }
      );
    },
    // 添加参会人信息
    addPople() {
      this.tableList.push(JSON.parse(JSON.stringify(this.formJson)));
    },
    // 删除报名人
    delted(ind) {
      this.$confirm("此操作将进行删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.tableList.splice(ind, 1);
        })
        .catch(() => {});
    },
    // 获取验证码
    getCode() {
      if (this.phone.length < 6) {
        this.$message({
          message: "请输入正确的手机号码",
          type: "warning"
        });
        return;
      }
      if (!this.phone) {
        this.$message({
          message: "请输入手机号码",
          type: "warning"
        });
        return;
      }
      this.codeTime--;
      let time = setInterval(() => {
        this.codeTime--;
        if (this.codeTime <= 0) {
          this.codeTime = 60;
          clearInterval(time);
        }
      }, 1000);
      this.$http
        .post("/api/isv/signUp/getVerificationCode", {
          uTel: this.phone
        })
        .then(
          res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "验证码发送成功!"
              });
            } else {
              this.codeTime = 60;
              clearInterval(time);
              this.$message({
                message: res.data.errorMsg || "验证码发送失败",
                type: "warning"
              });
            }
          },
          err => {
            this.codeTime = 60;
            clearInterval(time);
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 表单验证
    async checkForm() {
      //填写表单的集合数据进行验证是否必填项填写完成
      let subData = await tableListCheck(this.tableList);
      if (subData) {
        if (!this.check) {
          this.$message({
            message: "请同意服务协议",
            type: "warning"
          });
          return;
        }
        this.phoneAlert = true;
      }
    },
    async subSuess() {
      if (this.phone.length < 6) {
        this.$message({
          message: "请输入正确的手机号码",
          type: "warning"
        });
        return;
      }
      if (!this.phone) {
        this.$message({
          message: "请输入手机号码",
          type: "warning"
        });
        return;
      }
      if (!this.code) {
        this.$message({
          message: "请输入验证码",
          type: "warning"
        });
        return;
      }

      this.subDataLoding = true;
      let subNum = this.tableList.length; //判断是否有在提交的数据
      let resSubItemData = {};
      for (let i = 0; i < this.tableList.length; i++) {
        if (!this.tableList[i].result) {
          //报名成功的数据不在提交
          resSubItemData = await this.subItemData(this.tableList[i]);
          this.tableList[i].result = resSubItemData.result;
          this.tableList[i].errorMsg = resSubItemData.errorMsg;
          this.$forceUpdate();
          subNum--;
        }
      }
      this.subDataLoding = false;
      if (resSubItemData.result && this.tableList.length == 1) {
        this.phoneAlert = false;
      } else if (this.tableList.length > 1) {
        this.phoneAlert = false;
      }
      // 表示没有提交数据
      if (subNum == this.tableList.length) {
        this.$message({
          message: "网络异常，请重新填写",
          type: "warning"
        });
        window.location.reload();
        return;
      }
      this.checkResult();
    },
    // 检测提交结果是否全部提交成功
    checkResult() {
      let ifSubAll = true;
      for (let i = 0; i < this.tableList.length; i++) {
        if (!this.tableList[i].result) {
          ifSubAll = false;
          break;
        }
      }
      if (ifSubAll) {
        this.$alert(this.titName, "提示", {
          confirmButtonText: "我知道了",
          callback: action => {
            this.isShow = this.codeImg ? true : false;
          }
        });
      }
    },
    // 重新提交一项
    async agenItem(index) {
      this.tableList[index].loading = true;
      let res = await this.subItemData(this.tableList[index]);
      this.tableList[index].result = res.result;
      this.tableList[index].errorMsg = res.errorMsg;
      this.tableList[index].loading = false;
      this.$forceUpdate();
      this.checkResult();
    },
    // 提交单个人的信息
    subItemData(table) {
      return new Promise((resolve, reject) => {
        let subData = {
          verifiPhoneNum: this.phone,
          verifiCodeStr: this.code,
          corpId: this.urlParam.corpId,
          activityId: this.urlParam.activityId,
          tempId: this.urlParam.tempId,
          ticketTypeId: this.urlParam.ticketTypeId,
          channelId: this.urlParam.channelId,
          bbsId: "",
          userInfo: {}
        };
        let componenList = table.componenList;
        for (let i = 0; i < componenList.length; i++) {
          if (componenList[i].attribute.filedCode != "bbsId") {
            subData.userInfo[componenList[i].attribute.filedCode] =
              componenList[i].attribute.filedValue || "";
          } else {
            subData.bbsId = componenList[i].attribute.filedValue || "";
          }
        }
        let resData = {
          result: "", //状态
          errorMsg: "" //错误信息
        };
        this.$http.post("/api/isv/signUp/signUp", subData).then(
          res => {
            if (res.data.success) {
              if (res.data.result.isReview) {
                this.titName = "您的报名信息已提交！请耐心等待审核结果";
              } else {
                this.titName = "您的报名信息已提交！";
              }
              resData.result = true;
              resData.errorMsg = "";
              this.codeImg = res.data.result.openDing;
              this.$nextTick(() => {
                this.getNewCode();
              });
              resolve(resData);
            } else {
              resData.result = false;
              resData.errorMsg = res.data.errorMsg || "数据提交失败";
              this.$message({
                message: resData.errorMsg,
                type: "warning"
              });
              resolve(resData);
            }
          },
          err => {
            resData.result = false;
            resData.errorMsg = "服务器出小差了";
            this.$message({
              message: resData.errorMsg,
              type: "warning"
            });
            resolve(resData);
          }
        );
      });
    },
    // tag关闭标签
    handleClose(ind) {
      this.tableList[ind].errorMsg = "";
    },
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next();
    }
  }
};
</script>
<style scoped>
.head-top-box {
  width: 100%;
  height: auto;
  min-height: 50px;
  color: #ffffff;
  background: #1f222f;
  border-bottom: 1px solid #f8f8f8;
  /* position: fixed;
  left: 0px;
  top: 0px; */
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 0px 36px;
}
.table-box {
  padding: 20px;
}
.tem-box {
  width: 100%;
  height: auto;
  background: #f8f8f8;
}
.big-box {
  width: 100%;
  height: auto;
  background: #f8f8f8;
}

.table-item {
  width: 100%;
  height: auto;
  min-height: 160px;
  background: #ffffff;
  border-radius: 6px;
  padding: 13px 36px 0px 36px;
  margin-bottom: 18px;
}
.big-box > div:nth-last-of-type(3) {
  margin-bottom: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.big-box > div:nth-last-of-type(2) {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.table-item:hover {
  box-shadow: 0px 0px 8px rgba(237, 237, 236, 0.6);
}
.protol-text {
  color: #ff3e85;
  font-size: 14px;
  cursor: pointer;
}
.item-tit-box {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eeeeee;
  padding: 16px 4px;
  font-size: 18px;
  color: #1e222e;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}
.item-tit-box-img {
  width: 18px;
  margin-left: 9px;
  cursor: pointer;
}
.item-con-box {
  width: 100%;
  height: auto;
  padding: 18px 30px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}

.item-con {
  /* border: 1px solid red; */
  width: 24%;
  height: auto;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  padding-left: 120px;
  position: relative;
  margin-bottom: 16px;
  margin-left: 1%;
}
.qrcode-box {
  width: 100%;
  height: 100%;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(64, 158, 255);
  z-index: 11;
}
.title {
  padding-right: 8px;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 120px;
  color: #1b0025;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
  text-align: right;
  /* border: 1px solid red; */
}
.title-span {
  color: #f56c6c;
}

.item {
  width: 100%;
  height: auto;
}
.add-pop {
  width: 100%;
  height: 66px;
  text-align: center;
  background: #fff;
  border-top: 1px solid #eeeeee;
  color: #909399;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
}
.bottom-submit-form {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 99;
  height: 70px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
}
.top-border-color {
  width: 100%;
  height: 2px;
  background-image: linear-gradient(
    -90deg,
    #3023ae 0%,
    #53a0fd 48%,
    #b4ec51 100%
  );
}
.phoneAlert-con {
  width: 100%;
  height: auto;
}
.phoneAlert-tit {
  width: 100%;
  height: auto;
  font-size: 22px;
  color: #070707;
  text-align: center;
  margin: 46px 0px 10px 0px;
}
.phoneAlert-plac {
  font-size: 18px;
  color: #797979;
  text-align: center;
  width: 100%;
  height: auto;
}
.phoneAlert-input-box {
  width: 450px;
  height: 66px;
  margin-left: 75px;
  border-bottom: 1px solid #797979;
  position: relative;
  margin-top: 36px;
}
.phoneAlert-input {
  width: 100%;
  height: 100%;
  padding: 0px 16px 0px 100px;
  border: none;
  color: #070707;
  font-size: 16px;
}
.phoneAlert-input-tit {
  height: 100%;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #fff;
  z-index: 2;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  font-size: 16px;
  color: #797979;
}
.get-code {
  position: absolute;
  right: 2px;
  top: 18px;
  width: 104px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  border: 1px solid #ff3e85;
  font-size: 14px;
  color: #ff3e85;
  cursor: pointer;
}
.get-code:hover {
  background: rgba(252, 57, 130, 0.08);
}
.dialog-code-box {
  width: 100%;
  height: auto;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  padding-bottom: 100px;
}
.dialog-code {
  width: 50%;
  height: auto;
  margin-bottom: 16px;
  margin-top: 16px;
}
.dialog-code-tit {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 22px;
  color: #070707;
  margin-bottom: 36px;
  margin-top: 46px;
}
.dialog-code-img {
  width: 266px;
  height: auto;
  /* border: 1px dashed #3a3a3a; */
  margin: auto;
  text-align: center;
}
.check-box {
  width: 100%;
  height: auto;
  text-align: center;
  margin-top: 36px;
  margin-bottom: 86px;
}
</style>

